<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="div123" style="background-color: yellow;border: 5px solid brown;"></div>
		<input type="checkbox" checked="checked">
		
		
		<script type="text/javascript">
			let inp=document.querySelector("input")
			console.log(inp.getAttribute("checked"));
			console.log(inp.checked);
		</script>
		
		
		
		<script type="text/javascript">
			let div=document.querySelector("div");
			// console.log(div.style.backgroundColor);
			// Style 行内样式的获取和设置
			
			console.log(div.getAttribute("id"))
			// getAttribute 获取行内的属性
			
			// div.setAttribute("style", "background-color: skyblue;");
			// 能够设置行内的属性，但是谨慎使用，因为他会把原来的样式也替换掉。可以用于改ID名
		</script>
	</body>
</html>
